<template>
    <div class="mainChat">
        <ChatItem @addImg = "addImg">

            <div class="item" v-for="(item,index) in chatInfo" :key="index">
                <div class="content">
                <img :src="item.img" width="280" height="186.47">
                <p>{{item.text}}</p>
                </div>

            <div class="post-red"> <a href="javascript:;" class="favorite" @click="addShow(item.id,index)">点赞({{item.num}})</a> </div>
            <span class="dateview">{{item.time}}</span>
         </div>

        </ChatItem>
    </div>
</template>

<script>
import ChatItem from './chatItem'
import {chat_info,chatAddShow} from '@/network/chat/chat'

export default {
    name:'mainChat',
    data(){
        return{
            chatInfo:'',
            page:0
        }
    },
    components:{
        ChatItem
    },
    methods:{
        addImg(value){
            if(value == '加载更多'){
                this.page++
            }
        },
        //增加可见
        addShow(id,index){
            this.chatInfo[index].num++
            let data = {
                operation_type:'updateShow',
                id:id
            }
            chatAddShow(data).then( res => {
                console.log(res)
            }).catch( err => {
                console.log(err)
            })
        }
    },
    created(){
        chat_info( () => {
        }).then( res => {
            this.chatInfo = res.data.result
            //console.log(res)
        }).catch( err => {
            console.log(err)
        })
    },
    watch:{
          page(newVal){
            let page = {
                page:newVal,
                //页码
                num:5
                //一页的数量
            }
            chat_info(page).then(res => {
                res.data.result.pop()
                if(res.data.result == ''){
                    alert('没有更多数据了')
                }else{
                    res.data.result.forEach( (item,index) => {
                        this.chatInfo.push(item)
                    })
                }
               
            }).catch( err => {
                console.log(err)
            })

        }
    }
}
</script>

<style scoped>
.mainChat{
    width: 1000px;
    margin: 0 auto;
    background: url(~@/assets/img/common/chat/r_bg.jpg) repeat-y 764px 0;
}
</style>